<template>
	<view class="content" :style="{'padding-top':top+'px','min-height':windowheight+'px'}">
		<Navbar title="系统通知" bgColor="#d86784" :backIcon="false" style="color: #ffffff;z-index: 1;"></Navbar>
		<view class="messagemain" :style="{'min-height':windowheight+'px'}">
			<uni-swipe-action style="width: 100%;height: auto;">
				<uni-swipe-action-item :right-options="options" @click="bindClick"> 
				<view class="actionitem">
					<view class="messageicon">
						<image src="http://zzqjt-test.oss-cn-hangzhou.aliyuncs.com/templates/photographer/res/3c7204e5b81043c2a63de0ed06ede524-%E9%80%9A%E7%9F%A5.png"></image>
					</view>
					<view class="messagetext">
						<view class="title">系统通知</view>
						<view class="text">您的申请已通过，请查收</view>
					</view>
					<view class="messageright">
						<uni-dateformat :date="new Date()" format='hh:mm' class="date"></uni-dateformat>
						<uni-tag text="2" type="error" />
					</view>
				</view>
				</uni-swipe-action-item>
				<uni-swipe-action-item :right-options="options">
					<view class="actionitem">
						<view class="messageicon" style="background-color: #5fc96d;">
							<image src="http://zzqjt-test.oss-cn-hangzhou.aliyuncs.com/templates/photographer/res/2db18b8ac09c4bb6bce750d56325639c-%E6%8F%90%E9%86%92.png"></image>
						</view>
						<view class="messagetext">
							<view class="title">接单提醒</view>
							<view class="text">您有新的用户跟拍订单等待您接单</view>
						</view>
						<view class="messageright">
							<uni-dateformat :date="new Date()" format='hh:mm' class="date"></uni-dateformat>
							<uni-tag text="2" type="error" />
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
	</view>
</template>
<script setup>
	import { ref,onMounted } from 'vue'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const url = getApp().globalData.url
	const title=ref('Hello')
	const windowheight=ref()
	const platform = ref()
	const statusBar = ref()
	const customBar = ref()
	const top = ref()
	const options=([
		{
			text: '设为已读',
			style: {
			    backgroundColor: '#007aff'
			}
		},
		{
			text: '删除',
			style: {
			    backgroundColor: '#dd524d'
			}
		}
	])
	const bindClick=(e)=>{
		console.log(e)
		if(e.content.text==="删除"){
			console.log("删除")
		}else if(e.content.text==="设为已读"){
			console.log("设为已读")
		}else{
			console.log("设为未读")
		}
	}
	const getColumnHeight=()=>{
		uni.getSystemInfo({
			success(res) {
				console.log(res)
				platform.value = res.platform
				windowheight.value=res.screenHeight
				// #ifdef MP-WEIXIN
				statusBar.value = res.statusBarHeight
				const custom = wx.getMenuButtonBoundingClientRect()
				customBar.value = custom.bottom + custom.top - res.statusBarHeight
				// #endif
				// #ifdef APP-PLUS
				statusBar.value = res.statusBarHeight
				customBar.value = res.statusBarHeight + 45
				// 这里是在安卓手机上加上 3 像素（当时好像是在安卓水滴屏上，系统导航栏高度较低才加上去的，大家可以真机自己调试一下）
				if (res.platform == "android") {
					statusBar.value += 3
					customBar.value += 3
				}
				// #endif
			}
		})
		top.value = customBar.value
		windowheight.value=windowheight.value-top.value
		//console.log(statusBar.value, customBar.value, top.value,windowheight.value)
	}
	onShow(()=>{
		const now = new Date().getTime()
		if (!uni.getStorageSync('token') || now > uni.getStorageSync('expireTime')) {
			uni.reLaunch({
				url: "/pages/login/login"
			})
		}
	})
	onMounted(()=>{
		getColumnHeight()
	})
</script>
<style lang="less">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-image: linear-gradient(to bottom,#d95e7d,#ffffff);
	}
	.messagemain{
		z-index: 0;
		width: 95vw;
		background-color: #ffffff;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		padding-bottom: 25px;
		overflow: hidden;
		.actionitem{
			height: 140rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.uni-swipe{
			height: 140rpx !important;
		}
		.uni-swipe_box{
			height: 140rpx !important;
		}
		.uni-swipe_text--center{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.messageicon{
			margin-left: 20rpx;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background-color: #a5586c;
			position: relative;
			image{
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}
		}
		.messagesculpture{
			margin-left: 20rpx;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			position: relative;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.messagetext{
			width: 450rpx;
			//margin-left: -150rpx;
			height: 90rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.text{
				font-size: 28rpx;
				color: #aaaaaa;
			}
		}
		.messageright{
			margin-right: 20rpx;
			width: 70rpx;
			height: 90rpx;
			position: relative;
			.date{
				position: absolute;
				top: 0;
				right: 0;
				font-size: 28rpx;
				color: #aaaaaa;
			}
			uni-tag{
				position: absolute;
				bottom: 0;
				right: 0;
				width: 40rpx !important;
				height: 40rpx !important;
				padding: 0 !important;
				border-radius: 50% !important;
				display: flex;
			}
			.uni-tag{
				width: 40rpx !important;
				height: 40rpx !important;
				padding: 0 !important;
				border-radius: 50% !important;
				display: inline-block;
				text-align: center !important;
				line-height: 40rpx !important;
				border: 0;
			}
		}
	}
</style>